<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        font-family: Arial, sans-serif;
    }
    
    .box {
        width: 800px;
        margin: 20px auto;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }
    
    ul {
        list-style: none;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    li {
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: aqua;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    li:hover {
        background-color: #00c1cf;
    }
    
    img {
        width: 100px;
        height: 100px;
        border-radius: 4px;
    }
    
    .center {
        margin: 20px 0;
        min-height: 120px;
        padding-left: 130px;
    }
    
    .center_box {
        display: inline-block;
        margin: 10px 30px;
        text-align: center;
    }
    
    h4 {
        color: #e60000;
        font-size: 16px;
        margin-top: 5px;
    }
    
    .a {
        margin: 20px 0;
        min-height: 120px;
    }
    
    .center_box input[type="checkbox"] {
        margin-right: 10px;
    }
    
    .center_box button {
        margin-top: 10px;
        padding: 5px 10px;
        border: none;
        background-color: #00c1cf;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .center_box button:hover {
        background-color: #00a8b0;
    }
    
    .num {
        margin: 0 10px;
    }
    
    .zj {
        text-align: right;
        font-size: 18px;
        font-weight: bold;
        margin-top: 20px;
        color: #e60000;
    }
    
    h1 {
        text-align: center;
        margin-bottom: 20px;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li>家电</li>
            <li>食品</li>
        </ul>
        <div class="center"></div>
    </div>
    <div style="width: 800px;margin: auto;">
        全选：<input type="checkbox" name="" id="qx">
        <button onclick="del()">选中删除</button>
        <h1 style="text-align: center;">购物车</h1>
    </div>
    <div class="a"></div>
    <p class="zj">总价:0</p>
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

    <script>
        var obj = [{
            pid: 0,
            id: 1,
            name: '空调',
            price: 20,
            num: 1,
            img: 'https://img1.baidu.com/it/u=1662555726,343892433&fm=253&fmt=auto&app=120&f=JPEG?w=1066&h=800',
            checked: false
        }, {
            pid: 0,
            id: 2,
            name: '电视',
            price: 30,
            num: 1,
            img: 'https://img2.baidu.com/it/u=843214,2740104898&fm=253&fmt=auto&app=120&f=JPEG?w=1067&h=800',
            checked: false
        }, {
            pid: 0,
            id: 3,
            name: '洗衣机',
            price: 10,
            num: 1,
            img: 'https://img2.baidu.com/it/u=1722669050,2447672758&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
            checked: false
        }, {
            pid: 1,
            id: 4,
            name: '薯片',
            price: 20,
            num: 1,
            img: 'https://img0.baidu.com/it/u=1566364404,1659244369&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=728',
            checked: false
        }, {
            pid: 1,
            id: 5,
            name: '面包',
            price: 10,
            num: 1,
            img: 'https://img0.baidu.com/it/u=1045440409,2918996592&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500',
            checked: false
        }, {
            pid: 1,
            id: 6,
            name: '烤肠',
            price: 5,
            num: 1,
            img: 'https://img0.baidu.com/it/u=875657261,122911310&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
            checked: false
        }];

        obj.forEach(item => {
            if (item.pid == 0) {
                $('.center').append(`
                  <div class="center_box">
                    <p><img src="${item.img}" alt=""></p>
                    <p>名字:${item.name}</p>
                    <h4>￥:${item.price}</h4>
                    <button onclick="add(${item.id})">添加</button>
                  </div>
                `);
            }
        });

        function apply() {
            var li = document.querySelectorAll('li');
            li.forEach((item, index) => {
                item.addEventListener('click', () => {
                    $('.center').html('');
                    obj.forEach(item => {
                        if (item.pid == index) {
                            $('.center').append(`
                  <div class="center_box">
                    <p><img src="${item.img}" alt=""></p>
                    <p>名字:${item.name}</p>
                    <h4>￥:${item.price}</h4>
                    <button onclick="add(${item.id})">添加</button>
                  </div>
                `);
                        }
                    });
                });
            });
        }
        apply();

        var arr = [];

        function apply_a() {
            $('.a').html('');
            arr.forEach(item => {
                $('.a').append(`
                  <div class="center_box">
                    <input type="checkbox" onchange="gx(${item.id})" ${item.checked ? 'checked' : ''}>
                    <p><img src="${item.img}" alt=""></p>
                    <p>名字:${item.name}</p>
                    <p> 数量:<button onclick="jia(${item.id})">+</button> <span class="num">${item.num}</span> <button onclick="jian(${item.id})">-</button></p>
                    <h4>￥:${item.price}</h4>
                    <button onclick="removeItem(${item.id})">删除</button>
                  </div>
                `);
            });
            zj();
        }

        function add(id) {
            var a = obj.find(item => item.id == id);
            a.checked = false;
            var existingItem = arr.find(item => item.id === a.id);
            if (existingItem) {
                existingItem.num++;
            } else {
                arr.push(a);
            }
            apply_a();
        }

        function jia(id) {
            var item = arr.find(item => item.id == id);
            if (item) {
                item.num++;
                zj();
                apply_a();
            }
        }

        function jian(id) {
            var item = arr.find(item => item.id == id);
            if (item) {
                if (item.num > 1) {
                    item.num--;
                } else {
                    arr.splice(arr.indexOf(item), 1);
                }
                zj();
                apply_a();
            }
        }

        function removeItem(id) {
            var item = arr.find(item => item.id == id);
            if (item) {
                arr.splice(arr.indexOf(item), 1);
                zj();
                apply_a();
            }
        }

        function gx(id) {
            var item = arr.find(item => item.id == id);
            if (item) {
                item.checked = !item.checked;
                zj();
            }
        }

        function zj() {
            var total = arr.reduce((sum, item) => {
                return item.checked ? sum + (item.num * item.price) : sum;
            }, 0);
            $('.zj').html(`总价:${total}`);
        }

        var input = document.querySelector('input[type="checkbox"][id="qx"]');
        input.addEventListener('change', () => {
            arr.forEach(item => {
                item.checked = input.checked;
            });
            apply_a();
        });

        function del() {
            arr = arr.filter(item => !item.checked);
            apply_a();
        }
    </script>
</body>

</html>